<template>
  <el-dialog
    center
    :title="type == 'add' ? '添加' : '编辑'"
    v-model="Visible"
    width="42%"
    @close="handleClose"
  >
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="dialogForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="热源" prop="heatSourceId">
            <el-select
              v-model="ruleForm.heatSourceId"
              placeholder="请选择"
              style="width: 100%"
              @change="handleHeatSourceChange"
            >
              <el-option
                v-for="item in heatSourceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="换热站" prop="heatStationId">
            <el-select
              v-model="ruleForm.heatStationId"
              placeholder="请选择"
              style="width: 100%"
              @change="handleHeatStationChange"
            >
              <el-option
                v-for="item in heatStationOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="系统名称" prop="heatSystemId">
            <el-select
              v-model="ruleForm.heatSystemId"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in heatSystemOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型" prop="type">
            <el-select
              v-model="ruleForm.type"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="表号" prop="no">
            <el-input v-model="ruleForm.no"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="倍率" prop="rate">
            <el-input v-model="ruleForm.rate"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="原始单位" prop="unit">
            <el-input v-model="ruleForm.unit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="换算后单位" prop="unitNew">
            <el-input v-model="ruleForm.unitNew"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="统计(上级)" prop="calUpperLevel">
            <el-select
              v-model="ruleForm.calUpperLevel"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in calUpperLevelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="统计(同级)" prop="calSameLevel">
            <el-select
              v-model="ruleForm.calSameLevel"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in calUpperLevelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采集方式" prop="collectMode">
            <el-select
              v-model="ruleForm.collectMode"
              placeholder="选择采集方式"
              style="width: 100%"
            >
              <el-option
                v-for="item in collectModeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采集数据点" prop="realDataId">
            <el-select
              v-model="ruleForm.realDataId"
              filterable
              remote
              reserve-keyword
              clearable
              placeholder="输入数据点名称搜索"
              :remote-method="remoteMethod"
              :loading="loading"
              style="width:100%;"
            >
              <el-option
                v-for="item in sjdOptions"
                :key="item.id"
                :label="item.dataName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据点类型" prop="realDataType">
            <el-select
              v-model="ruleForm.realDataType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in realDataTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用途" prop="useType">
            <el-select
              v-model="ruleForm.useType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in useTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="margin-top:20px;">
        <el-button
          type="primary"
          v-preventReClick
          @click="submitForm('ruleForm')"
          >确定</el-button
        >
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { reactive, toRefs, ref, onMounted, nextTick } from "vue";
import { editEnergy, addEnergy } from "@/api/energy";
import { getRealDataAll } from "@/api/realDataManage";
import { ElMessage } from "element-plus";
import { getHeatSourcePermisstion } from "@/api/heatSource";
import { getHeatStation } from "@/api/heatStation";
import { getSystemList } from "@/api/system";
import { useStore } from "vuex";
export default {
  name: "UpdatePassword",
  props: {
    Visible: {
      type: Boolean,
      default: false,
    },
    dialogRow: {
      type: Object,
      default: () => {},
    },
    type: {
      type: String,
      default: "add",
    },
    heatSourceId: {
      type: String,
      default: "",
    },
  },
  setup(props, context) {
    const store = useStore();
    const dialogForm = ref(null);
    const state = reactive({
      typeOptions: [
        { label: "气", value: 1 },
        { label: "水", value: 2 },
        { label: "电", value: 3 },
        { label: "热", value: 4 },
      ],
      collectModeOptions: [
        { label: "人工", value: 1 },
        { label: "自动", value: 2 },
      ],
      useTypeOptions: [
        { label: "办公", value: 1 },
        { label: "热水", value: 2 },
        { label: "供暖", value: 3 },
      ],
      realDataTypeOptions: [
        { label: "累计值", value: 1 },
        { label: "瞬时值", value: 2 },
        { label: "余量值", value: 3 },
      ],
      calUpperLevelOptions: [
        {
          label: "统计-减",
          value: -1,
        },
        {
          label: "不统计",
          value: 0,
        },
        {
          label: "统计-加",
          value: 1,
        },
      ],
      sjdOptions: [],
      loading: false,
      heatSourceOptions: [],
      heatStationOptions: [],
      heatSystemOptions: [],
      ruleForm: {
        heatSourceId: "",
        heatStationId: "",
        heatSystemId: "",
        name: "",
        no: "",
        rate: 1,
        unit: "",
        unitNew: "",
        type: 1,
        collectMode: 1,
        realDataId: "",
        realDataType: 1,
        useType: 1,
        sort: 100,
      },
      rules: {
        heatSourceId: [
          { required: true, message: "请选择热源", trigger: "change" },
        ],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        rate: [{ required: true, message: "请输入倍率", trigger: "blur" }],
        unit: [{ required: true, message: "请输入原始单位", trigger: "blur" }],
        unitNew: [{ required: true, message: "请输入新单位", trigger: "blur" }],
        type: [{ required: true, message: "请选择类型", trigger: "change" }],
        collectMode: [
          { required: true, message: "请选择采集类型", trigger: "change" },
        ],
      },
    });

    onMounted(() => {
      getHeatSourceData();
      if (props.type == "add") {
        nextTick(() => {
          dialogForm.value.resetFields();
          state.ruleForm.heatSourceId = props.dialogRow.heatSourceId;
          state.ruleForm.heatStationId = props.dialogRow.heatStationId;
          state.ruleForm.heatSystemId = props.dialogRow.heatSystemId;
          state.ruleForm.type = props.dialogRow.type;
        });
      } else {
        state.ruleForm = props.dialogRow;
      }
    });

    const getHeatSourceData = async () => {
      let list = store.getters.sourceData;
      state.heatSourceOptions = list;
      state.ruleForm.heatSourceId = props.heatSourceId;
      await getHeatStationData();
      await getSystemData();
      //   getHeatStationData();
      //   getSystemData();
      // const { data: res } = await getHeatSourcePermisstion();
      // if (res.success) {
      //   const list = res.data.map((item) => {
      //     return { label: item.name, value: item.id };
      //   });
      //   state.heatSourceOptions = list;
      //   getHeatStationData();
      //   getSystemData();
      // }
    };

    const getHeatStationData = () => {
      getHeatStation({ heatSourceId: state.ruleForm.heatSourceId }).then(
        (res) => {
          if (res.data.success) {
            const { data } = res.data;
            const list = data.map((item) => {
              return { label: item.name, value: item.id };
            });
            state.heatStationOptions = list;
          }
        }
      );
    };

    const getSystemData = async () => {
      const { heatSourceId, heatStationId } = state.ruleForm;
      const { data: res } = await getSystemList({
        heatSourceId,
        heatStationId,
      });
      if (res.success) {
        if (res.data) {
          const list = res.data.map((item) => {
            return { label: item.name, value: item.id };
          });
          state.heatSystemOptions = list;
        }
      }
    };
    /**查询数据点 */
    const remoteMethod = (query) => {
      state.loading = true;
      if (query !== "") {
        const { heatSourceId, heatStationId, heatSystemId } = state.ruleForm;
        getRealDataAll({
          heatSourceId,
          heatStationId,
          heatSystemId,
          dataName: query,
        }).then((res) => {
          if (res.data.success) {
            state.sjdOptions = res.data.data;
            state.loading = false;
          }
        });
      } else {
        state.sjdOptions = [];
        state.loading = false;
      }
    };

    const submitForm = () => {
      dialogForm.value.validate((valid) => {
        if (valid) {
          if (props.type == "add") {
            addEnergy(state.ruleForm).then((res) => {
              if (res.data.success) {
                ElMessage.success(res.data.msg);
                dialogForm.value.resetFields();
                context.emit("refresh", res.data.data);
              }
            });
          } else {
            editEnergy(state.ruleForm).then((res) => {
              if (res.data.success) {
                ElMessage.success(res.data.msg);
                dialogForm.value.resetFields();
                context.emit("refresh", res.data.data);
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };

    const handleClose = () => {
      context.emit("close", false);
    };

    const handleHeatSourceChange = () => {
      state.ruleForm.heatStationId = "";
      state.heatStationOptions = [];
      state.ruleForm.heatSystemId = "";
      state.heatSystemOptions = [];
      getHeatStationData();
      getSystemData();
    };

    const handleHeatStationChange = () => {
      state.ruleForm.heatSystemId = "";
      state.heatSystemOptions = [];
      getSystemData();
    };

    return {
      ...toRefs(state),
      submitForm,
      dialogForm,
      handleClose,
      remoteMethod,
      handleHeatSourceChange,
      handleHeatStationChange,
    };
  },
};
</script>
